<template>
    <!-- 登录页面容器 -->
    <div class="login-container">
        <!-- 登录框主体 -->
        <div style="width: 100%; height: 600px; border: 1px solid white; border-bottom: 0px solid white">
            <!-- 表单组件，使用 Element Plus 的 el-form -->
            <el-form ref="formRef" :model="ruleForm" :rules="rules" status-icon label-position="left" label-width="0px"
                class="demo-ruleForm login-page">
                <h3 class="title">系统登录</h3>

                <!-- 用户名输入框 -->
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="用户名" autocomplete="off" />
                </el-form-item>

                <!-- 密码输入框 -->
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" type="password" placeholder="密码" autocomplete="off" />
                </el-form-item>

                <!-- 用户类型单选按钮（管理员或普通用户） -->
                <el-form-item>
                    <el-radio v-model="ruleForm.type" label="admin" border>管理员</el-radio>
                    <el-radio v-model="ruleForm.type" label="user" border>用户</el-radio>
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item style="width: 100%">
                    <el-button type="primary" style="width: 80%" :loading="logining"
                        @click="handleSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
// 引入 Vue Composition API 的 ref
import { ref } from 'vue'
// 引入 Vue Router，用于跳转页面
import { useRouter } from 'vue-router'
// 引入 axios 发起 HTTP 请求
import axios from 'axios'
// 引入 Element Plus 弹窗组件
import { ElMessageBox } from 'element-plus'
// 引入 Pinia 用户状态管理
import { useUserStore } from '@/stores/userStore'

// 获取路由实例
const router = useRouter()
// 获取用户状态 store
const userStore = useUserStore()

// 表单 DOM 引用，用于调用校验方法
const formRef = ref(null)

// 登录状态 loading 控制（防止重复点击）
const logining = ref(false)

// 登录表单绑定的数据
const ruleForm = ref({
    username: 'admin1', // 默认用户名
    password: '123123', // 默认密码
    type: 'admin'       // 默认登录类型（管理员）
})

// 表单验证规则
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

// 登录处理函数
const handleSubmit = () => {
    // 校验表单
    formRef.value.validate((valid) => {
        if (valid) {
            logining.value = true // 开启加载状态

            // 发起 GET 请求进行登录验证
            axios
                .get('http://localhost:8181/login', {
                    params: ruleForm.value
                })
                .then((res) => {
                    logining.value = false // 关闭加载状态

                    if (res.data.code === -1) {
                        // 登录失败，弹出提示框
                        ElMessageBox.alert(res.data.msg, '提示', { confirmButtonText: '确定' })
                    } else {
                        // 登录成功，保存用户信息到 store（会自动存入 localStorage）
                        userStore.setUser(ruleForm.value.type, res.data.data)

                        // 根据用户类型跳转页面
                        if (ruleForm.value.type === 'admin') {
                            router.replace('/adminIndex')
                        } else {
                            router.replace('/userIndex')
                        }
                    }
                })
                .catch((err) => {
                    logining.value = false
                    console.error('登录请求失败:', err)
                })
        } else {
            return false
        }
    })
}
</script>

<style scoped>
/* 页面背景容器 */
.login-container {
    width: 100%;
    height: 723px;
    background-image: url('../assets/image/background.png');
    margin-top: 0px;
}

/* 登录表单区域样式 */
.login-page {
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
</style>
